import ReactDOM from 'react-dom'
import { createContext, useContext, useState } from 'react'
/**
 * context 使用步骤
 *
 * 1.创建Context对象
 * 2.使用Context.Provider包裹需要获取共享数据的组件爱你
 *    注意只需要使用Provider组件包裹需要获取共享数据的组件即可
 * 3.使用Context.Consumer获取共享数据
 *    使用的是render-props模式
 */

// 如果没有提供Provider组件，那么Consumer组件拿到的就是green
const Context = createContext('green')

const Parent = () => {
  const [color, setColor] = useState('red123')

  return (
    <div>
      <h3>我是parent组件</h3>
      <Context.Provider value={color}>
        <Node></Node>
      </Context.Provider>
    </div>
  )
}

const Node = () => {
  return (
    <div>
      <SubNode></SubNode>
    </div>
  )
}

const SubNode = () => {
  return (
    <div>
      <Child></Child>
    </div>
  )
}

const Child = () => {
  // 需要在这个地方使用Context中的数据，Context.Consumer是无法使用的，他只能在jsx中使用
  // 这个时候就需要useContext函数
  const value2 = useContext(Context)
  return (
    <div>
      <Context.Consumer>
        {value => <p>我是child组件:{value}</p>}
      </Context.Consumer>
      <h3>这里是通过js获取的数据：{value2}</h3>
    </div>
  )
}

ReactDOM.render(<Parent />, document.getElementById('root'))
